%section
  %a.scroll-target{name: 'typography'}
  %a.scroll-target{name: 'typography__headings'}
  %h3.color-black Headers
  %p Includes mixins, variables and a class helpers for each.

  .panel.panel--padded
    - (1..6).each do |h|
      %p{class: "font-h#{h}"} The quick brown fox jumps over the lazy dog.
      %code.expandable
        = expandable_toggle
        %p= "<h#{h}>The quick brown fox jumps over the lazy dog.</h#{h}>"
        %br/
        %p
          %span.color-primary Silent class:
          = "@extend %font-h#{h};"
        %p
          %span.color-primary Variables:
          = "$h#{h}-size, $h#{h}-line-height"

= render 'tenon/styleguides/typography/paragraphs'
= render 'tenon/styleguides/typography/small'
= render 'tenon/styleguides/typography/blockquote'
= render 'tenon/styleguides/typography/lists'
= render 'tenon/styleguides/typography/inline'
= render 'tenon/styleguides/typography/styles'
= render 'tenon/styleguides/typography/variables'
